<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			#btn {
				width: 320px;
				height: 102px;
				margin: 0 auto;
			}
			
			#btn a {
				display: inline-block;
				width: 100px;
				height: 100px;
				border: solid 1px #a6e1ec;
				text-decoration: none;
				text-align: center;
				line-height: 100px;
				font-family: "微软雅黑";
				font-size: 30px;
			}
			
			#box {
				width: 320px;
				height: 300px;
				position: relative;
				margin: 0 auto;
				color: #fff;
			}
			
			ul li {
				width: 100%;
				height: 100%;
				display: none;
			}
			
			.active {
				display: block;
				background: #0f0f0f;
			}
		</style>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>

	<body>
		<div id="btn">
			<a href="javascript:;" class="active">选项一</a>
			<a href="javascript:;">选项二</a>
			<a href="javascript:;">选项三</a>
		</div>
		<ul id="box">
			<li class="active">这是第一个</li>
			<li>这是第二个</li>
			<li>这是第三个</li>
		</ul>
		<script type="text/javascript">
			class Tab{
				constructor(btn,box){
					this.oBth = document.querySelector(btn);
					this.oBox = document.querySelector(box);
					this.aBtn = this.oBth.querySelectorAll("a");
					this.aBox = this.oBox.querySelectorAll("li");
					this.index=0;
					this.change();
				}
				change(){
					var _this = this;
					for (let i = 0;i<this.aBtn.length;i++) {
						
						this.aBtn[i].onclick = function(){
							_this.index = i-1
							_this.fn(i);
						}
					}
				}
				fn(i){
					var _this = this;
					setInterval(function(){
						_this.index++;
						if(_this.index==3){
							_this.index = 0;
						}
						for (var k = 0;k<_this.aBtn.length;k++) {
							_this.aBox[k].className = "";
							_this.aBtn[k].className = "";
						}
						_this.aBox[_this.index].className = "active"
						_this.aBtn[_this.index].className = "active"
					},1000)
				}
			}
			window.onload = function(){
				new Tab("#btn","#box");
			}
		</script>
	</body>

</html>